{% extends 'core/clean.html' %}
{% load comp_filters %}
{% block css_link %}
  <link rel="stylesheet" href="/css/{{CSS_ROOT}}/search.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/{{CSS_ROOT}}/dialog.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/{{CSS_ROOT}}/element.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/{{CSS_ROOT}}/general.css" type="text/css" media="all" charset="utf-8"/>
  <link rel="stylesheet" href="/css/{{CSS_ROOT}}/nav.css" type="text/css" media="all" charset="utf-8"/>
{% endblock %}

{% block js_link %}
  <!-- YUI Components --> 
  <script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
  <!-- need finally make a new js file contain all the info manage script -->	
  <script type="text/javascript" src="/js/mesh.js"></script>
  <script type="text/javascript" src="/js/histogram.js"></script>
  <!-- Project Components -->

  {% zoyoejs 'all' %}
  <script type="text/javascript" src="/js/search.js"></script>
  <script type="text/javascript">

     YUI().use("node",function(Y){
         var searchInput = Y.one("#main-search-bar input");
         if (searchInput != null) {
           var tipMsg = "";
           var generalTipMsg = "Please enter the query content";
           var addressTipMsg = "Please enter your location";
           var girlTipMsg = "Please enter girl's name";
           var searchInputNode = Y.Node.getDOMNode(searchInput);
           var generalTarget = Y.one("#match-option").all("a").item(0);
           var addressTarget = Y.one("#match-option").all("a").item(1);
           var girlTarget = Y.one("#match-option").all("a").item(2);
           if (generalTarget.get("className") == "select") {
               tipMsg = generalTipMsg;
           } else if (addressTarget.get("className") == "select") {
               tipMsg = addressTipMsg;
           } else if (girlTarget.get("className") == "select") {
               tipMsg = girlTipMsg;
           }
           searchInputNode.value = tipMsg;
           searchInput.on('focus', function(e){
             if (searchInputNode.value == tipMsg) {
               searchInputNode.value = "";
             }
           });
           searchInput.on('blur', function(e){
             if (searchInputNode.value == "") {
               searchInputNode.value = tipMsg;
             }
           });
           generalTarget.on('click', function(e){
             tipMsg = generalTipMsg;
             if (searchInputNode.value == "" 
                    || searchInputNode.value == addressTipMsg
                    || searchInputNode.value == girlTipMsg) {
                 searchInputNode.value = tipMsg;
             }
           });
           addressTarget.on('click', function(e){
             tipMsg = addressTipMsg;
             if (searchInputNode.value == "" 
                    || searchInputNode.value == generalTipMsg
                    || searchInputNode.value == girlTipMsg) {
                 searchInputNode.value = tipMsg;
             }
           });
           girlTarget.on('click', function(e){
             tipMsg = girlTipMsg;
             if (searchInputNode.value == "" 
                    || searchInputNode.value == generalTipMsg
                    || searchInputNode.value == addressTipMsg) {
                 searchInputNode.value = tipMsg;
             }
           });
         }
      });
     
    function setType(type) {
      YUI().use("node",function(Y){
         var links = Y.one("#service-type").all("a");
         var typeInput = Y.one("#service-type input");
         var index = 0;
         if (type == "brothel") {
           index = 0;
         } else if (type == "escort") {
           index = 1;
         } else if (type == "massage") {
           index = 2;
         }
         typeInput.set('value',type);
         links.set('className','filter-button');
         links.item(index).set('className','filter-button-select');
      });
    }
  </script>
{% endblock %}

{% block title %}Sydney Menu{% endblock %}

{% block nav %}
    <div id="title-bar">
      <div class="nav">
        <div class="brand">
          <a href="/search/"><img src="/res/auadult.png" height="30px"/></a>
        </div>
        <div class="nav-button-tray">
          <a class="nav-button" href="/search/">Homepage</a>
          <a class="nav-button" href="/map/">Map</a>
          <a class="nav-button" href="/forum/">Forum</a>
          <a class="nav-button" href="/mark/">Recommendation</a>
          <a class="nav-button" onclick="zoyoe.admin.ShowAboutUsDialog()">About Us</a>
          {% if user.is_authenticated %}
          <a class="nav-button" onclick ="zoyoe.admin.ShowAddServiceDialog()">Quick Publish</a>
          {% include "core/_usrmenu.html" %}
          {% else %}
          <a class="nav-button" onclick ="zoyoe.admin.ShowLoginDialog()">Login</a>
          <a class="nav-button" onclick ="zoyoe.admin.ShowRegisterDialog()">Register</a>
          {% endif %}
        </div>
      </div>
    </div>
{% endblock %}
 

{% block content %}
    <div id="banner-img">
      <img src="/res/banner_1.png" alt=""></img>
    </div>
    <form id="search" action="javascript:zoyoe.search.PreSearch();">
      <div id="search-bar">
        <div id="service-type">
          <input type="hidden" name="type" value="brothel"></input>
          <a class='filter-button-select' onclick="setType('brothel')">Brothel</a>
          <a class='filter-button' onclick="setType('escort')">Escort</a>
          <a class='filter-button' onclick="setType('massage')">Massage</a>
          <p class="clear"></p>
        </div>

        <div id="main-search-bar">
          <div id="match-option" class="option">
            <a class='select' onclick="zoyoe.search.SetPreference('general',0)">General</a>
            <a onclick="zoyoe.search.SetPreference('address',1)">My Location</a>
            <a onclick="zoyoe.search.SetPreference('item',2)">Girls</a>
          </div>
          <div class="invalid-hint"></div>

          {{"AutoComplete"|auto_complete|style:"left:6px;bottom:1px;height:39px;padding:0 40px 0 0;width:446px;"|render|safe}}
        </div>
        
        <p class="clear"></p>
        <div id="filter-bar">
          <div id="nationality" style="float:left; margin-right:8px;">
            <div class="label" style="width:165px;">Nationality</div>
            {{"nationality"|combo|style:"width:165px;"|addfield:"Asia"|addfield:"Caucasion"|addfield:"European"|addfield:"South American"|render|safe}}
          </div>
          <div id="radius" style="float:left; margin-right:8px;">
            <div class="label" style="width:165px;">Radius</div>
            {% select %}{"name":"radius","style":"width:165px;","fields":["&lt; 5km","&lt; 10km","&lt; 20km"],"default":"&lt; 5km"}{% endselect %}
          </div>
          <div id="price" style="float:left; margin-right:8px;">
            <div class="label" style="width:165px;">Price</div>
            {% select %}{"name":"price","style":"width:165px;","fields":["Any","30 - 150","150 - 300","300+"],"default":"Any"}{% endselect %}
          </div>
          <div id="search-btn" style="float:left;">
            <a id='search-button' onclick="zoyoe.search.PreSearch()">Search</a>
          </div>
          <p class="clear"></p>
        </div>
      </div>
   </form>

    <div id="map-container">

      <div id="map-div">
      </div>
      <script type="text/javascript">
          
          var key =
          "Av6myMPPl0Aix9wsk-YXGQ23bvY1A3I2dmHJ44GAVYwlF_70J4OJdmv_SqM1rFJd";

          var longitude = 151206954/1000000;
          var latitude = -33869628/1000000;
          
          var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(latitude,
          longitude), {text:""});
          var map = new Microsoft.Maps.Map(
            document.getElementById("map-div"),
            {
              credentials: key,
              mapTypeId: Microsoft.Maps.MapTypeId.road,
              center: new Microsoft.Maps.Location(latitude,
          longitude),
              zoom: 14,
              showCopyright: false, showDashboard: false,
          showLogo:false, showScalebar: false,
            }
          );
          map.entities.push(pin);
        </script>
      <p class="clear"></p>
    </div>
    <div class="foot">
      <div id="contact">
        <p>Contact 9262 7900 / <a href="mailto:acnwco@gmail.com">info@adultsservice.com.au</a> to advertise here</p>
      </div>
      <div id="copyright">
        <p>&copy; 2011 <a href="http://www.adultsservice.com.au/">Adults Service</a> All Rights Reserved</p>
      </div>
      <p class="clear"></p>
    </div>
{% endblock %}


{% block tail %}
  <div id='zsk' class='msk'>
  </div>
{% endblock %}
